<template>
  <div>
    <el-table :data="flight_detail_data">
      <el-table-column
        property="flight_name.name"
        label="航班"
        width="150"
      ></el-table-column>
      <el-table-column property="start_time" label="出发时间" width="200">
        <template slot-scope="scope">
          {{ formatTime(scope.row.start_time) }}
        </template>
      </el-table-column>
      <el-table-column property="end_time" label="到达时间" width="200">
        <template slot-scope="scope">
          {{ formatTime(scope.row.end_time) }}
        </template>
      </el-table-column>
      <el-table-column property="first_class_price" label="头等舱价格">
        <template slot-scope="scope">
          ￥{{ scope.row.first_class_price }}
        </template>
      </el-table-column>
      <el-table-column property="economy_class_price" label="经济舱价格">
        <template slot-scope="scope">
          ￥{{ scope.row.economy_class_price }}
        </template>
      </el-table-column>
      <el-table-column property="economy_class_price" label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="booking(scope.row)"
            type="text"
            size="small"
            class="booking"
          >
            订票
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <login :login_form="login_form" />
    <order :order_status="order_status" :order_detail="order_detail" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import login from "./login";
import order from "./order";
export default {
  name: "flight_table",
  data() {
    return {
      login_form: false,
      order_status: false,
      order_detail: "",
    };
  },
  components: {
    login,
    order,
  },
  computed: {
    ...mapState({
      username: (state) => state.name,
      userid: (state) => state.user_id,
      userinfo: (state) => state.userinfo,
      click_order_status: (state) => state.click_order_status,
    }),
  },
  methods: {
    // 点击订票
    booking(item) {
      if (this.username == "") {
        this.login_form = true;
        return;
      }
      this.order_detail = item;
      this.order_status = true;
      this.$store.commit("click_order", true);
    },
    // 格式化时间
    formatTime(date) {
      var json_date = new Date(date);
      var ysar = json_date.getFullYear();
      var month = json_date.getMonth() + 1;
      var day = json_date.getDate();
      var hours = json_date.getHours();
      var minutes = json_date.getMinutes();
      if (month < 10) {
        month = "0" + String(month);
      }
      if (day < 10) {
        day = "0" + String(day);
      }
      if (hours < 10) {
        hours = "0" + String(hours);
      }
      if (minutes < 10) {
        minutes = "0" + String(minutes);
      }
      var datetime =
        ysar + "-" + month + "-" + day + " " + hours + ":" + minutes;
      return datetime;
    },
  },
  props: ["flight_detail_data"],
  watch: {
    userid(n, o) {
      if (this.userid != "") {
        this.login_form = false;
      }
    },
    click_order_status(n, o) {
      if (this.click_order_status == false) {
        this.order_status = false;
      }
    },
  },
};
</script>

<style scoped>
.booking {
  color: #ff7700;
  font-size: 16px;
}
</style>
